import React, { Component } from 'react';
import { Popover, WhiteSpace, WingBlank } from 'antd-mobile';
import StatusItem from '../StatusItem/StatusItem';
import YwxListView from '../../common/YwxListView/YwxListView';

import './StatusList.less';
const Item = Popover.Item;

const signs = [
    { id: 0, title: '全部' },
    { id: 1, title: '已注册' },
    { id: 2, title: '未注册' },
    { id: 3, title: '已交易' },
    { id: 4, title: '未交易' },
]

export default class StatusList extends Component {


    constructor(props) {
        super(props);
        this.state = {
            pageSize: 15,
            list: [],
            nomore: false,
            visible: false,
            signObj: signs[0],
            count: 0
        }
    }


    componentDidMount() {
        this.page = 1;
        this.fetchData();
    };


    fetchData = (callback) => {
        React.$utils.request({
            url: '/app/state',
            params: {
                apply: this.props.type,
                sign: this.state.signObj.id,
                page: this.page,
                pageSize: this.state.pageSize
            }
        }).then(res => {
            this.setState({
                count: res.count,
                noMore: res.list.length === 0,
                list: (this.page === 1 ? [] : this.state.list).concat(res.list)
            });
            callback && callback(res);
        })
    }

    onRefresh = () => {
        this.page = 1;
        this.fetchData();
    };

    onEndReached = (type) => {
        this.page++;
        this.fetchData();
    };


    onSignChange = (value) => {
        let signObj = signs.filter(item => (item.id === value))[0];
        this.setState({
            signObj,
            visible: false,
            refreshing: true
        }, () => {
            this.onRefresh();
        });

    }

    render() {

        const header = (
            <WingBlank className='status-list-header'>
                <div className=''>合计数量：{this.state.count}</div>
                {
                    (this.props.type === 0) &&
                    <Popover
                        mask
                        overlayClassName="fortest"
                        overlayStyle={{ color: 'currentColor' }}
                        visible={this.state.visible}
                        onSelect={(el) => { this.onSignChange(el.props.value) }}
                        overlay={
                            signs.map(item => (<Item key={item.id} value={item.id}>{item.title}</Item>))
                        }
                    >
                        <div className='sign'>
                            <span>{this.state.signObj.title}</span>
                            <img className='sign-image' src={require('../../../images/money_icon2.png')} alt="" />
                        </div>
                    </Popover>
                }
            </WingBlank>
        )
        return (
            <div>
                {header}
                <YwxListView
                    list={this.state.list}
                    renderRow={item => (<StatusItem key={item.id} info={item} />)}
                    renderSeparator={(s, r) => <WhiteSpace key={`${s}-${r}`} size='sm' />}
                    onRefresh={() => { this.onRefresh(0) }}
                    onEndReached={() => { this.onEndReached(0) }}
                    pageSize={this.state.pageSize}
                    noMore={this.state.noMore}
                />
            </div>
        );
    }
}